<template>
  <div id="resetpass">
    <div>
      <form action method>
        <Row class="close">
          <Col span="2">
            <van-icon name="arrow-left" @click="()=>{this.$router.go(-1)}" />
          </Col>
          <Col span="20"></Col>
          <Col span="2"></Col>
        </Row>
        <Row class="margin_left_right maxTitle">
          <Col span="24">
            <span>重置密码</span>
          </Col>
        </Row>
        <Row class="margin_left_right input">
          <Col span="6">
            <Select size="small" :wordDoman="wordDoman" />
          </Col>
          <Col span="18">
            <input
              type="text"
              name="NumberPhone"
              style="color:#d2d2d2;"
              placeholder="请输入手机号"
              value
              ref="inputUsername"
              @keyup="keyUserUpDown('inputUsername')"
            />
          </Col>
        </Row>
        <Row class="margin_left_right input">
          <Col span="16">
            <input
              ref="inputVerify"
              type="number"
              name="verify"
              style="color:#d2d2d2;"
              placeholder="验证码"
              value
              @keyup="keyVerifyUpDown('inputVerify')"
            />
          </Col>
          <Col span="8">
            <Button size="small" ghost @click="getVerifyNumber()" class="verify_btn">获取验证码</Button>
          </Col>
        </Row>

        <Row class="margin_left_right input">
          <Col span="22">
            <input
              ref="inputPass"
              type="password"
              name="password"
              style="color:#d2d2d2;"
              placeholder="密码至少6位且不能全数字"
              value
              @keyup="keyPassUpDown('inputPass')"
            />
          </Col>
          <Col span="2" class="icon">
            <van-icon name="eye-o" v-if="showPassword" @click="changeShowPass()" />
            <van-icon name="eye" v-else @click="changeShowPass()" />
          </Col>
        </Row>

        <Row class="margin_left_right input">
          <Col span="24">
            <Button type="success" :disabled="isDisabled" size="large" to="/" long>登入</Button>
          </Col>
        </Row>
        <Row class="protocel_bottom">
          <Col span="2"></Col>
          <Col span="24" class="protocel_parent">
            <span class="agree">
              登入代表您已阅读并同意
              <router-link to="/" tag="span" class="protocol">《用户协议》</router-link>
            </span>
          </Col>
          <Col span="2"></Col>
        </Row>
      </form>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Row, Col } from "view-design";
import { Icon } from "vant";
Vue.use(Icon);

import Select from "../components/Select/Select";

export default {
  name: "resetpass",
  components: {
    Button,
    Row,
    Col,
    Icon,
    Select
  },
  data() {
    return {
      showPassword: true,
      isDisabled: false,
      wordDoman: [
        { label: "马来西亚(+60", value: "+60" },
        { label: "印度尼西亚(+62", value: "+62" },
        { label: "菲律宾(+63", value: "+63" },
        { label: "新加坡(+65", value: "+65" },
        { label: "泰国(+66", value: "+66" },
        { label: "文莱(+673", value: "+673" },
        { label: "日本(+81", value: "+81" },
        { label: "韩国(+82", value: "+82" },
        { label: "越南(+84", value: "+84" },
        { label: "朝鲜(+850", value: "+850" },
        { label: "香港(+852", value: "+852" },
        { label: "澳门(+853", value: "+853" },
        { label: "柬埔寨(+855", value: "+855" },
        { label: "老挝(+856", value: "+856" },
        { label: "中国(+86", value: "+86" },
        { label: "台湾(+886", value: "+886" },
        { label: "孟加拉国(+880", value: "+880" },
        { label: "土耳其(+90", value: "+90" },
        { label: "印度(+91", value: "+91" },
        { label: "巴基斯坦(+92", value: "+92" },
        { label: "阿富汗(+93", value: "+93" },
        { label: "斯里兰卡(+94", value: "+94" },
        { label: "缅甸(+95", value: "+95" },
        { label: "马尔代夫(+960", value: "+960" },
        { label: "黎巴嫩(+961", value: "+961" },
        { label: "约旦(+962", value: "+962" },
        { label: "叙利亚(+963", value: "+963" },
        { label: "伊拉克(+964", value: "+964" },
        { label: "科威特(+965", value: "+965" },
        { label: "沙特阿拉伯(+966", value: "+966" },
        { label: "阿曼(+968", value: "+968" },
        { label: "以色列(+972", value: "+972" },
        { label: "巴林(+973", value: "+973" },
        { label: "卡塔尔(+974", value: "+974" },
        { label: "不丹(+975", value: "+975" },
        { label: "蒙古(+976", value: "+976" },
        { label: "尼泊尔(+977", value: "+977" },
        { label: "伊朗(+98", value: "+98" }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    changeShowPass() {
      this.showPassword = !this.showPassword;
      if (this.showPassword) {
        this.$refs.inputPass.type = "password";
      } else {
        this.$refs.inputPass.type = "text";
      }
    },
    getVerifyNumber() {},
    keyPassUpDown(input) {
      console.log(this.$refs.inputPass.value.length);
      if (input === "inputPass" && this.$refs.inputPass.value.length > 0) {
        this.$refs.inputPass.style = "color:#000;";
        console.log("password black");
      } else {
        this.$refs.inputPass.style = "color:#d2d2d2;";
        console.log("password c5c5c5");
      }
    },
    keyUserUpDown(input) {
      console.log(this.$refs.inputUsername.value.length);
      if (
        input === "inputUsername" &&
        this.$refs.inputUsername.value.length > 0
      ) {
        this.$refs.inputUsername.style = "color:#000;";
        console.log("username black");
      } else {
        this.$refs.inputUsername.style = "color:#d2d2d2;";
        console.log("username c5c5c5");
      }
    },
    keyVerifyUpDown(input) {
      console.log(this.$refs.inputVerify.value.length);
      if (input === "inputVerify" && this.$refs.inputVerify.value.length > 0) {
        this.$refs.inputVerify.style = "color:#000;";
        console.log("inputVerify black");
      } else {
        this.$refs.inputVerify.style = "color:#d2d2d2;";
        console.log("inputVerify c5c5c5");
      }
      if (this.$refs.inputVerify.value.length > 4) {
        this.$refs.inputVerify.value = this.$refs.inputVerify.value.substr(
          0,
          4
        );
      }
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
.close {
  margin: 40px 10px;
  font-size: 22px;
}
.margin_left_right {
  margin: 40px;
}
.maxTitle {
  font-size: 25px;
}
.protocel_parent {
  text-align: center;
}
.input {
  font-size: 16px;

  color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #000;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.input input {
  padding: 8px 0 8px;
  width: 100%;
  height: 100%;
  margin-left: 8px;
}
.verify_btn {
  color: #999;
  border-color: #979797;
  margin-bottom: 2px;
}
.icon {
  text-align: right;
  color: black;
  font-size: 22px;
}
.wang_Password {
  font-size: 14px;
  color: black;
}
.protocel_parent {
  font-size: 14px;
}
.agree {
  font-size: 12px;
  color: #999;
}
.protocol {
  color: cornflowerblue;
}
.protocel_bottom {
  margin-top: 50%;
}
</style>